<template>
  <div class="dialog-add-user-contain">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="field"
      width="1200px"
      @close="handleClose"
      custom-class="dialog-search-form"
    >
      <el-card class="card-search">
        <el-form
          ref="ruleForm"
          :mode="ruleForm"
          label-width="100px"
          class="dialog-ruleForm"
        >
          <el-form-item label="登录名称:">
            <el-input
              v-model="ruleForm.loginName"
              style="width: 150px"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号码:">
            <el-input
              v-model="ruleForm.phonenumber"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label-width="0px">
            <div style="display: flex">
              <el-button
                class="btn-search"
                round
                icon="el-icon-search"
                size="medium"
                @click="initTable"
                >搜索</el-button
              >
              <el-button
                class="btn-search"
                round
                icon="el-icon-refresh"
                size="medium"
                @click="resetTable"
                >重置</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-table
          :data="tableData"
          max-height="400"
          tooltip-effect="dark"
          border
          style="width: 100%"
          size="small"
          align="center"
          :header-cell-style="{ background: '#eff3f8', color: '#333' }"
          @selection-change="handleSelectionChange"
          highlight-selection-row
          stripe
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="loginName"
            label="登录名称"
            min-width="150"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户姓名"
            min-width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            min-width="150"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            prop="phonenumber"
            label=" 手机号码"
            min-width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label=" 用户状态"
            min-width="90"
            align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.status == "0" ? "正常" : "停用" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="150"
            align="center"
          >
          </el-table-column>
        </el-table>
        <XyPagination
          :total="total"
          :pageSizeNum="pageSize"
          :pageNum="currentPage"
          @pagination="handlerPagination"
        ></XyPagination>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { unallocatedList, selectAuthUser } from "@/api/systemmanagement";
import XyPagination from "@/components/XyPagination";

export default {
  name: "ProjectDetail",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: "",
    },
    roleId: {
      type: Number,
      default: 0,
    },
  },
  components: {
    XyPagination,
  },
  data() {
    return {
      ruleForm: { loginName: "", phonenumber: "" },
      loginName: "",
      phonenumber: "",
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value; // 返回父组件通过 v-model 传递的值
      },
      set(val) {
        this.ruleForm.loginName = "";
        this.ruleForm.phonenumber = "";
        this.$emit("close", val); // 当 dialogVisible 变化时，通知父组件更新
      },
    },
  },
  watch: {
    collapse(val) {
      // 当 collapse 值变化时，控制所有节点展开或折叠
      this.handleCollapseChange(val);
    },
    checked(val) {
      // 新增: 监听 checked 值变化
      this.handleCheckedChange(val);
    },
    value(val) {
      // 当弹窗打开时调用初始化表格数据
      if (val && this.roleId) {
        this.initTable();
      }
    },
  },
  methods: {
    initTable() {
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        roleId: this.roleId,
        loginName: this.ruleForm.loginName,
        phonenumber: this.ruleForm.phonenumber,
      };
      unallocatedList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    submitConfirm() {
      let data = {
        roleId: this.roleId,
        userIds: this.multipleSelection.map((item) => item.userId),
      };
      selectAuthUser(data).then((res) => {
        if (res.code == 0) {
          this.initTable();
          this.handleClose();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleClose() {
      this.dialogVisible = false; // 关闭弹窗
      this.$emit("close"); // 发送关闭事件给父组件
    },
    handlerPagination(page) {
      this.currentPage = page.pageNum;
      this.pageSize = page.pageSize;
      this.initTable();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetTable() {
      this.ruleForm.loginName = "";
      this.ruleForm.phonenumber = "";
      this.initTable();
    },
  },
};
</script>
<style lang="scss">
.dialog-add-user-contain {
  .dialog-ruleForm {
    width: 100%;
    display: flex;
    line-height: 60px;
    margin: 0 auto;
    .el-form-item {
      border: 0;
      .el-input__inner {
        border: 1px solid #e1e1e1 !important;
        width: 100%;
      }
    }
  }
  .el-card {
    margin: 15px;
  }
}
.dialog-search-form {
  .card-search .el-card__body {
    padding: 10px 20px !important;
  }
}
</style>
